<!-- 其他选择器
    逗号        同时匹配多个能匹配到的  （逗号分隔多个选择器）
    子孙        匹配选择器的所有后代    （空格分隔多个选择器）
    >           只匹配选择器的1级后代
    +           匹配选择器最近的第1个同级元素
    ~           匹配选择器的所有同级兄弟元素
-->






<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他选择器</title>
    <style>
        #span1,
        .span3 {
            color: rebeccapurple;
        }


        .子孙 span {
            color: green;
        }

        .子孙 div p span {
            color: pink;
        }


        .div1>p {
            background-color: yellow;
        }


        .div2 h5+p {
            background-color: rebeccapurple;
        }


        .div3 h5~p {
            background-color: orange;
        }
    </style>
</head>



<body>


    <span class="span1" id="span1">逗号1</span>
    <span class="span2" id="span2">逗号2</span>
    <span class="span3" id="span3">逗号3</span>
    <br>
    <hr>
    <br>
    <div class="子孙">
        <div>
            <p>
                <span>内部孙</span>
            </p>
        </div>

        <span>内部子</span>
    </div>
    <br>
    <hr>
    <br>
    <div class="div1">
        <p>直接子元素1</p>
        <span>直接子元素2</span>
        <div>
            <p>间接孙元素1</p>
            <p>间接孙元素2</p>
            <p>间接孙元素3</p>
        </div>
        <span>
            <p>间接孙元素P</p>
        </span>
    </div>
    <br>
    <hr>
    <br>
    <div class="div2">
        <h5>+++</h5>
        <p>第1近的同级元素</p>
        <p>第2近的同级元素</p>
        <p>第3近的同级元素</p>
    </div>
    <br>
    <hr>
    <br>
    <div class="div3">
        <h5>+++</h5>
        <p>第1近的同级元素</p>
        <p>第2近的同级元素</p>
        <p>第3近的同级元素</p>
    </div>

</body>

</html>